<script setup lang="ts">
import { MtEdit, leftAsideStore } from 'maotu'
import 'maotu/dist/style.css'
import type { IExportJson } from 'maotu/dist/src/components/mt-edit/components/types';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia'
import { useMaoxyStore } from '@/stores/maoxy'
import DeviceBind from '@/components/maoxy/device-bind.vue';

let maoxyStore = useMaoxyStore();
let { jsonData } = storeToRefs(maoxyStore);

//1# 导入整个文件夹
const modulesFiles = import.meta.glob("/src/assets/svgs/file/**.svg", { eager: true, as: 'raw' })
const register_config:any = [];
for (const key in modulesFiles) {
  //根据路径获取svg文件名
  const name = key.split("/").pop().split(".")[0];
  register_config.push({
    id: name,//svg名称
    title: name,
    type: 'svg',
    thumbnail: key,
    svg: modulesFiles[key],
    props: {
      fill: {
        type: 'color',
        val: '#FF0000',//默认填充色
        title: '填充色'
      }
    }
  })
}
leftAsideStore.registerConfig('电器符号', register_config);

//2# 导入vue组件
leftAsideStore.registerConfig('vue组件', [
    {
        id: 'my-button',//vue组件名称
        title: '我的按钮',
        type: 'vue',
        thumbnail: '/src/assets/svgs/component/my-button.svg',//缩略图请自己指定一个 图片还是svg都可以
        props: {
            text: {
                type: 'input',
                val: '按钮',
                title: '文本'
            },
            bgColor: {
                type: 'color',
                val: '#44B6E7',
                title: '背景色'
            },
            fontFamily: {
                title: '字体',
                type: 'select',
                val: '黑体',
                options: [
                    {
                        value: '黑体',
                        label: '黑体'
                    },
                    {
                        value: '宋体',
                        label: '宋体'
                    }
                ]
            }
        }
    }
]);

//3# 导入自定义svg
leftAsideStore.registerConfig('自定义svg', [
{
    id: 'custom-demo',//vue组件名称
    title: '自定义svg',
    type: 'custom-svg',
    thumbnail: '/src/assets/svgs/file/demo.svg',
    props: {
      circleFill: {
        type: 'color',
        val: '#FF0000',
        title: '圆颜色'
      },
      pathFill1: {
        type: 'color',
        val: '#00FF00',
        title: '线1颜色'
      },
      pathFill2: {
        type: 'color',
        val: '#0000FF',
        title: '线2颜色'
      },
      pathFill3: {
        type: 'color',
        val: '#FFFF00',
        title: '线3颜色'
      },
      showLine2: {
        type: 'switch',
        val: true,
        title: '显示线2'
      }
    }
  }
]);

//4# 导入图片
leftAsideStore.registerConfig('图片', [
  {
    id: 'my-img',
    title: '猫小鱼',
    type: 'img',
    thumbnail: '/src/assets/imgs/mxy.png', //支持远程地址,也支持svg，只是不能变色之类的了，不过会保留矢量属性
    props: {

    }
  }
]);

//4# 导入echarts饼图
leftAsideStore.registerConfig('测试图表', [
  {
    id: 'pie-charts',
    title: 'echarts饼图',
    type: 'vue',
    thumbnail: '/src/assets/svgs/component/pie-charts.svg',
    props: {
      title: {
        title: '标题',
        type: 'input',
        val: '默认标题'
      },
      seriesName: {
        title: '详情',
        type: 'input',
        val: '详情标题'
      },
      seriesData: {
        title: '数据',
        type: 'jsonEdit',
        val: [
          {
            value: 1048,
            name: '办公楼A'
          },
          {
            value: 735,
            name: '办公楼B'
          },
          {
            value: 580,
            name: '保安室'
          },
          {
            value: 484,
            name: '地下车库'
          },
          {
            value: 300,
            name: '食堂'
          }
        ]
      }
    }
  }
]);

const router = useRouter();
const MtEditRef = ref<InstanceType<typeof MtEdit>>();
const onPreviewClick = (exportJson: IExportJson) => {
    console.log(exportJson, '这是要传给预览组件的数据');
    maoxyStore.setJsonData(exportJson);
    router.push({
        path: "/about"
    });
};
const onReturnClick = () => {
    router.go(-1);
};
const onSaveClick = (exportJson: IExportJson) => {
    console.log(exportJson, '这是要保存的数据');
    maoxyStore.setJsonData(exportJson);
};
const loadJson = () => {
    let jsonObj = {};

    if (jsonData && jsonData.value && jsonData.value.json && jsonData.value.json.length > 0){
        jsonObj = jsonData.value
    }
    else{
        let jsonTemp = [
          {
            id: 'text-vue-rfEqQD4y2G',
            title: '文字',
            type: 'vue',
            binfo: {
              left: 738,
              top: 38,
              width: 383,
              height: 50,
              angle: 0
            },
            resize: true,
            rotate: true,
            lock: false,
            active: false,
            hide: false,
            props: {
              text: '加载已有数据',
              fontFamily: '黑体',
              fontSize: 18,
              fill: '#FFF700',
              vertical: false
            },
            tag: 'text-vue',
            common_animations: {
              val: '',
              delay: 'delay-0s',
              speed: 'slow',
              repeat: 'infinite'
            },
            events: []
          },
          {
            id: 'sys-line-kgIM4cL60s',
            title: '自由连线',
            type: 'sys-line',
            binfo: {
              left: 501,
              top: 177,
              width: 711,
              height: 0,
              angle: 0
            },
            resize: false,
            rotate: false,
            lock: false,
            active: false,
            hide: false,
            props: {
              stroke: '#ff0000',
              'stroke-width': 2,
              'marker-start': false,
              'marker-end': true,
              point_position: [
                {
                  x: 0,
                  y: 0
                },
                {
                  x: 711,
                  y: 0
                }
              ],
              ani_type: 'none',
              ani_dur: 20,
              ani_color: '#0a7ae2',
              ani_reverse: false,
              ani_play: true,
              bind_anchors: {
                start: null,
                end: null
              }
            },
            tag: 'sys-line',
            common_animations: {
              val: '',
              delay: 'delay-0s',
              speed: 'slow',
              repeat: 'infinite'
            },
            events: []
          },
          {
            id: 'sys-line-sfHoJjRCDO',
            title: '自由连线',
            type: 'sys-line',
            binfo: {
              left: 501,
              top: 233,
              width: 735,
              height: 0,
              angle: 0
            },
            resize: false,
            rotate: false,
            lock: false,
            active: false,
            hide: false,
            props: {
              stroke: '#ff0000',
              'stroke-width': 2,
              'marker-start': false,
              'marker-end': false,
              point_position: [
                {
                  x: 0,
                  y: 0
                },
                {
                  x: 735,
                  y: 0
                }
              ],
              ani_type: 'electricity',
              ani_dur: 20,
              ani_color: '#FF0000',
              ani_reverse: false,
              ani_play: true,
              bind_anchors: {
                start: null,
                end: null
              }
            },
            tag: 'sys-line',
            common_animations: {
              val: '',
              delay: 'delay-0s',
              speed: 'slow',
              repeat: 'infinite'
            },
            events: []
          },
          {
            id: 'sys-line-Rr3SVNwuSU',
            title: '自由连线',
            type: 'sys-line',
            binfo: {
              left: 498,
              top: 313,
              width: 742,
              height: 0,
              angle: 0
            },
            resize: false,
            rotate: false,
            lock: false,
            active: false,
            hide: false,
            props: {
              stroke: '#FFFFFF',
              'stroke-width': 10,
              'marker-start': false,
              'marker-end': false,
              point_position: [
                {
                  x: 0,
                  y: 0
                },
                {
                  x: 742,
                  y: 0
                }
              ],
              ani_type: 'waterdrop',
              ani_dur: 20,
              ani_color: '#0a7ae2',
              ani_reverse: true,
              ani_play: true,
              bind_anchors: {
                start: null,
                end: null
              }
            },
            tag: 'sys-line',
            common_animations: {
              val: '',
              delay: 'delay-0s',
              speed: 'slow',
              repeat: 'infinite'
            },
            events: []
          },
          {
            id: 'demo-6bmwf6LJ0M',
            title: '演示svg文件',
            type: 'svg',
            binfo: {
              left: 791,
              top: 401,
              width: 50,
              height: 50,
              angle: 0
            },
            resize: true,
            rotate: true,
            lock: false,
            active: false,
            hide: false,
            props: {
              fill: '#FF0000'
            },
            tag: 'demo',
            common_animations: {
              val: 'rotate360',
              delay: 'delay-0s',
              speed: 'slow',
              repeat: 'infinite'
            },
            events: []
          }
        ]

        jsonObj = {
          canvasCfg: {
            width: 1920,
            height: 1080,
            scale: 1,
            color: '',
            img: '',
            guide: true,
            adsorp: true,
            adsorp_diff: 5,
            transform_origin: {
              x: 0,
              y: 0
            },
            drag_offset: {
              x: 0,
              y: 0
            }
          },
          gridCfg: {
            enabled: false,
            align: true,
            size: 10
          },
          json: jsonTemp
        }
    }


    return jsonObj;
};

// 响应式状态
let projectId = ref(168);

// 生命周期钩子
onMounted(() => {
    let jsonObj = loadJson()
    MtEditRef.value?.setImportJson(jsonObj);
});

</script>

<template>
    <div style="width: 100%; height: 100vh;">
        <mt-edit
            ref="MtEditRef"
            @on-preview-click="onPreviewClick"
            @on-return-click="onReturnClick"
            @on-save-click="onSaveClick"
        >
            <template #deviceBind="{ item }">
                <device-bind :hand-item-info="item" :project-id="projectId"></device-bind>
            </template>
        </mt-edit>
    </div>
</template>
